﻿<!DOCTYPE html>
<html>
<head>
    <title>Input Example</title>
    <script src="../../js/pixi3.dev.js"></script>
    <script src="../../dist/EZGUI.js"></script>
</head>
<body>
    <script>

        var guiObj = {
            id: 'myWindow',

            component: 'Window',

            padding: 4,

            //component position relative to parent
            position: { x: 10, y: 10 },


            width: 500,
            height: 500,

            layout:[1,3],
            children: [
             null,
              {
                  id: 'myInput',
                  text: '',
                  component: 'Input',
                  position: 'center',
                  width: 300,
                  height: 50,
              },
              {
                  id: 'btn1',
                  text: 'Get Text Value',
                  component: 'Button',
                  position: 'center',
                  width: 200,
                  height: 100,
              }
            ]
        }




        var renderer = PIXI.autoDetectRenderer(820, 800);
        document.body.appendChild(renderer.view);
        var stage = new PIXI.Stage(0x000000);


        
        //Set EZGUI renderer
        EZGUI.renderer = renderer; 

        //load EZGUI themes 
        //here you can pass multiple themes
        EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () {


            //create the gui
            //the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field
            var guiElt = EZGUI.create(guiObj, 'kenney');

            EZGUI.components.btn1.on('click', function (event) {
                alert(EZGUI.components.myInput.text);
            });


            stage.addChild(guiElt);

        })





        requestAnimationFrame(animate);
        //sprite.setTexture(texture2);

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(stage);
        }

        
    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
